
import './Research.scss';
import { researchStore } from '../../stores/ResearchStore';
import { observer } from 'mobx-react';
import { Input } from 'antd';


const { Search } = Input;
export const ResearchNav = observer(() => {
    return <div className="topNav">
        <div className="menu">
            <div className="title" onClick={() => {
                var researchContent: any = document.getElementsByClassName('researchContent')[0];
                var _top: number = researchContent.offsetTop;
                window.scrollTo(0, _top - 150);
                researchStore.changeType('');
            }}>
                All Posts
            </div>
            {
                researchStore.categories.map((r) => {
                    return <div className="title" style={{ color: researchStore.type === r.id ? 'rgb(87, 78, 126)' : 'rgb(0, 0, 0)' }} onClick={() => {
                        var researchContent: any = document.getElementsByClassName('researchContent')[0];
                        var _top: number = researchContent.offsetTop;
                        window.scrollTo(0, _top - 150);
                        researchStore.changeType(r.id);
                    }}>
                        {r.name}
                    </div>
                })
            }
            <div className="title" style={{ color: researchStore.type === 'collect' ? 'rgb(87, 78, 126)' : 'rgb(0, 0, 0)' }} onClick={() => {
                var researchContent: any = document.getElementsByClassName('researchContent')[0];
                var _top: number = researchContent.offsetTop;
                window.scrollTo(0, _top - 150);
                researchStore.changeType('collect');
            }}>
                收藏
            </div>
        </div>
        <div className="search">
            <Search placeholder="请输入关键词" onSearch={(v) => {
                var researchContent: any = document.getElementsByClassName('researchContent')[0];
                var _top: number = researchContent.offsetTop;
                window.scrollTo(0, _top - 150);
                researchStore.search(v);
            }} enterButton />
        </div>
    </div>
})